<template>
	<div>
		<ul class="container">
			<li v-for="(item, index) in showingList" :key="item.id">
				<input type="checkbox" :id="index" v-model="item.isDone"/>
				<label :for="index">
					{{ item.value }}
				</label>
			</li>
		</ul>
	</div>
</template>

<script>
import ToDoList from "../ToDoList";
export default {
	data() {
		return {};
	},
	computed: {
		list() {
			return ToDoList.list;
		},
		showingList() {
			return ToDoList.showingList;
		},
	},
};
</script>

<style scoped>
.container {
	width: 500px;
    height: 200px;
	background-color: rgb(235, 207, 207);
}
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    width: 500px;
    height: 30px;
}
</style>